<template>
  <div class="app-container">
    <!-- 筛选框 -->
    <div class="filter-container">
      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="showDialog(10000)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容列表 -->
    <el-table :data="list" border fit highlight-current-row header-row-class-name="table-header">
      <el-table-column label="ID" prop="id" min-width="20" />
      <el-table-column label="课程名称" prop="name" />
      <el-table-column label="介绍" prop="desc" />
      <el-table-column label="修改时间" prop="updated_at" width="200" />
      <!-- 操作列按钮 -->
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showDialog(scope.$index)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteData(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <!-- 表单 -->
      <el-form :model="temp">
        <el-form-item label="课程名称" label-width="100px">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="课程介绍" label-width="100px">
          <el-input v-model="temp.desc" />
        </el-form-item>
      </el-form>
      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="temp.id == 0 ? createData() : updateData()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import courseTypeApi from '@/api/course-type'
export default {
  name: 'CourseType1',
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      list: [],
      temp: { id: 0, name: '', desc: '' }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    resetTemp() {
      this.temp = { id: 0, name: '', desc: '' }
    },
    showDialog(index) {
      this.dialogVisible = true
      if (index < 100) {
        this.dialogTitle = '编辑课程类型'
        this.temp = this.list[index]
      } else {
        this.dialogTitle = '新增课程类型'
        this.resetTemp()
      }
    },
    getData() {
      courseTypeApi.list().then(res => { this.list = res.data })
    },
    createData() {
      const { name, desc } = this.temp
      courseTypeApi.add({ name, desc }).then(res => {
        this.getData()
        this.resetTemp()
        this.dialogVisible = false
      })
    },
    updateData() {
      const { id, name, desc } = this.temp
      courseTypeApi.edit({ id, name, desc }).then(res => {
        this.getData()
        this.resetTemp()
        this.dialogVisible = false
      })
    },
    deleteData(index) {
      const { id } = this.list[index]
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        courseTypeApi.delete(id).then(res => {
          this.getData()
        })
      })
    }
  }
}
</script>
